<template>
  <div class="qmm">
    <Nav @postLogin="postIfLoginFn"></Nav>
    <Leader gameName="圈猫猫" ref="lea"></Leader>
    <h1>圈猫猫</h1>
    <p>
      （13 * 13）
      {{
        record === "未登录"
          ? `登录后查看并上传您的游戏记录`
          : record === 0
          ? "您还未通关"
          : `您已通关${record}次`
      }}
    </p>
    <div class="gameBox">
      <div id="catch-the-cat"></div>
    </div>
  </div>
</template>
<script>
import Nav from "../../components/Nav";
import Leader from "../../components/Leader";
import request from "../../api";

import "../../assets/js/phaser.min.js";
import "../../assets/js/catch-the-cat.js";
const gamestatestx = require("../../assets/js/catch-the-cat.js");



export default {
  name: "QMM",
  components: { Nav, Leader },
  data() {
    return {
      game: "",
      gamestate: "",
      userId: "",
      record: "未登录",
      setinterval1: 0,
    };
  },
  watch: {
    gamestate(newVal, oldVal) {
      console.log("开始校验");
      if (newVal === "win") {
        console.log("赢了");
        this.uploadLeader();
      }else if (newVal === "lose") {
        console.log("你输了哦~");
      }
    }
  },
  methods: {
    getText() {
      // this.gamestate = window.gamestatestx;
      this.gamestate = gamestatestx.gamestatestx;
    },
    update() {
      this.$refs.lea.updateLeader();
    },
    uploadLeader() {
      this.$ajax.post(this.$config.url +`/game/saveGameScore`,{
        personId: this.userId,
        gameName: "圈猫猫",
        score: this.record + 1,
      })
        .then(() => {
          this.record += 1;
          this.update();
        })
        .catch(() => {});
    },
    postIfLoginFn() {
      var user=  this.$store.state.user;
      console.log(JSON.stringify(user));
      if (JSON.stringify(user) !== "{}" && JSON.stringify(user)!==undefined) {
        this.userId = user.id;
        this.$ajax.post(this.$config.url +`/game/getPersonalGameScore`,{ personId: this.userId, gameName: "圈猫猫" }).then((res) => {
          console.log(res.data.data.score);
          if (!res.data.data.score) {
            this.record = 0;
          } else {
            this.record = res.data.data.score * 1;
          }
        });
      }else {
        this.userId = "游客";
        this.record = "未登录";
      }
    },
  },
  mounted() {
    this.game = new CatchTheCatGame({
      w: 13,
      h: 13,
      r: 20,
      backgroundColor: 0xeeeeee,
      parent: "catch-the-cat",
      statusBarAlign: "center",
      credit: "什么是快乐的小游戏",
    });
    // console.log(gamestatestx)
    this.setinterval1 = setInterval(this.getText, 100);
    this.postIfLoginFn();
  },
  beforeRouteLeave(to, form, next) {
    clearInterval(this.setinterval1);
    next();
  },
};
</script>

<style scoped lang="less">
#catch-the-cat {
  display: flex;
  justify-content: center;
}
h1 {
  padding: 100px 0 10px;
  font-size: 40px;
}
h1,
p {
  text-align: center;
}
.gameBox {
  height: 809px;
}
</style>